<div class="bg-blue-600">
  <div class="max-w-5xl mx-auto py-3 px-3 lg:px-0">
    <div class="flex items-center justify-between flex-wrap">
      <div class="w-0 flex-1 flex items-center">
        <span class="flex p-2 rounded-lg bg-blue-800">
          <%= inline_svg_tag "icons/outline/speakerphone.svg", class: "h-6 w-6 text-white", aria_hidden: true %>
        </span>
        <p class="ml-3 font-medium text-white truncate"><%= t(".title") %></p>
      </div>

      <div class="order-3 mt-2 flex-shrink-0 w-full sm:order-2 sm:mt-0 sm:w-auto">
        <%= link_to t(".cta"), edit_developer_path(user.developer), class: "flex items-center justify-center px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-blue-600 bg-white hover:bg-blue-50" %>
      </div>

      <!-- Ensure content wraps correctly on mobile. A dismiss button could go here. -->
      <div class="order-2 flex-shrink-0 sm:order-3 sm:ml-3">&nbsp;</div>
    </div>
  </div>
</div>
